<template>
  <div class="register absolute">
		<!-- 自定义导航栏 -->
		<view class="navBarBox">
			<!-- 状态栏占位 -->
			<view class="statusBar" style="height: var(--status-bar-height);"></view>
			<!-- 真正的导航栏内容 -->
			<view class="navBar">
				<view>注册</view>
			</view>
		</view>
		<view class="auth" style="margin-top: 60rpx;">
			<!-- <view class="wanl-title" style="text-align: center;">
				<image src="../../../static/images/default/logo.png" mode="widthFix" style="text-align: center;width: 194rpx;"></image>
			</view> -->
			<form @submit="formSubmit">
				<view class="auth-group radius-bock bg-white wlian-grey-light">
					<image src="../static/phone_1.png" mode="widthFix" style="width: 28rpx;margin-right: 10rpx;"></image>
					<input 
						type="text"
						placeholder="输入手机号" 
						confirm-type="next" 
						maxlength="16"
						placeholder-class="placeholder" 
						name="account"
						:value="account"
					></input>
				</view>
				<view class="auth-group radius-bock bg-white wlian-grey-light">
					<image src="../static/phone_1.png" mode="widthFix" style="width: 28rpx;margin-right: 10rpx;"></image>
					<input 
						type="text"
						placeholder="输入验证码" 
						confirm-type="next" 
						maxlength="16"
						placeholder-class="placeholder" 
						name="codeVal"
						:value="codeVal"
					></input>
					<text class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''" @click="sendMessage" style="font-size: 10px;">{{ countdown == 0 ? '发送验证码' : countdown + 'S'}}</text>
				</view>
				<view class="auth-group radius-bock bg-white wlian-grey-light">
					<image src="../static/code_2.png" mode="widthFix"  style="width: 28rpx;margin-right: 10rpx;"></image>
					<input 
						type="text"
						placeholder="输入登录密码" 
						password="true" 
						confirm-type="done"
						maxlength="16"
						placeholder-class="placeholder" 
						name="password"
						:value="password"
					></input>
				</view>
				<view class="auth-group radius-bock bg-white wlian-grey-light">
					<image src="../static/code_2.png" mode="widthFix" style="width: 28rpx;margin-right: 10rpx;"></image>
					<input 
						type="text"
						placeholder="再次输入登录密码" 
						password="true" 
						confirm-type="done"
						maxlength="16"
						placeholder-class="placeholder" 
						name="passwordconf"
						:value="passwordconf"
					></input>
				</view>

				<view class="auth-button flex flex-direction">
					<button class="cu-btn bg-orange sl radius-bock" @click="register()" style="width: 624rpx;color: #fff;
height: 98rpx;background: linear-gradient( 270deg, #EF430F 0%, #F17E19 100%);border-radius: 16rpx 16rpx 16rpx 16rpx;">立即注册</button>
				</view>
				<view style="display: flex;justify-content: space-between;">
					<view class="text-left" >
						已有账号，<text style="color: #EF430F;" @tap="$wanlshop.to('/pages/user/auth/auth')">去登录</text>
					</view>
<!-- 					<view class="text-right" @tap="retrieve">
						忘记密码
					</view> -->
				</view>

<!-- 				<view class="text-center" @tap="phone">
					短信验证码登录
				</view> -->

			</form>
		</view>

<!--    <div class="whiteBg">
      <div class="list">
        <div class="item">
          <div class="acea-row row-middle">
            <image src="../static/phone_1.png" mode="widthFix"></image>
            <input type="text" placeholder="输入真实姓名" v-model="real_name" />
          </div>
        </div>
        <div class="item">
          <div class="acea-row row-middle">
            <image src="../static/phone_1.png"></image>
            <input type="text" placeholder="输入手机号码" v-model="account" />
          </div>
        </div>
        <div class="item">
          <div class="acea-row row-middle" >
            <image src="../static/code_2.png"></image>
            <input type="text" placeholder="填写验证码" class="codeIput" v-model="captcha" />
            <button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''" @click="sendMessage" style="font-size: 10px;width: 90px;">
              {{ countdown == 0 ? '获取验证码' : countdown + 'S'}}
            </button>
          </div>
        </div>
        <div class="item">
          <div class="acea-row row-middle">
            <image src="../static/code_2.png"></image>
            <input type="password" placeholder="填写您的密码" v-model="password" />
          </div>
        </div>
        <div class="item">
          <div class="acea-row row-middle">
            <image src="../static/code_2.png"></image>
            <input type="password" placeholder="填写确认密码" v-model="passwordconf" />
          </div>
        </div>
        <div class="item">
          <div class="acea-row row-middle">
            <image src="../static/phone_1.png"></image>
            <input type="text" placeholder="推荐人邀请码" v-model="spphone" />
          </div>
        </div>
        <div class="item" v-if="false">
          <div class="acea-row row-middle">
            <image src="../static/phone_1.png"></image>
            <input type="text" placeholder="推荐人信息" v-model="sp_real_name" />
          </div>
        </div>
        <div class="item" v-if="isShowCode">
          <div class="align-left">
            <input type="text" placeholder="填写验证码" class="codeIput" v-model="codeVal" />
            <div class="code" @click="again"><img :src="codeUrl" /></div>
          </div>
        </div>
				
				<checkbox-group :class="checked == 1 ? 'shake-horizontal' : ''" class="auth-clause" @change="CheckboxChange" style="margin-top: 20rpx;margin-left: -10rpx">
					<checkbox class="orange" :class="checked == 2 ? 'checked' : ''" :checked="checked == 2 ? true : false" value="2" />
					<view>
						我已阅读<text @tap="onDetails($store.state.common.appConfig.user_agreement, '用户协议')">用户协议</text>及<text @tap="onDetails($store.state.common.appConfig.privacy_protection, '隐私保护')">隐私权保护声明</text>
					</view>
				</checkbox-group>
				
      </div>
      <div class="logon" @click="register()">立即注册</div>
      <div class="tip">
        <span class="font-color-red" @click="back">立即登录 |</span>
        <span class="font-color-red" @click="app"> APP下载 </span>
      </div>  
		</div> -->
    <!-- <div class="bottom"></div> -->
  </div>
</template>

<script>
  // import sendVerifyCode from "@/mixins/SendVerifyCode";
  // import {
  //   registerVerify,
  //   registerReset,
  //   register,
  //   getCodeApi,
  //   getUserSpid
  // } from "@/api/user";
  // import {
  //   HTTP_REQUEST_URL
  // } from '@/config/app.js';
	
  // import { validatorDefaultCatch } from "@/utils/dialog";
  // import attrs, { required, alpha_num, chs_phone } from "@utils/validate";
  // import { VUE_APP_API_URL } from "@utils";
  // import colors from '@/mixins/color.js';
  export default {
    name: "RetrievePassword",
    data: function() {
      return {
        account: "",
        phone: "",
        real_name: "",
        password: "",
        passwordconf: "",
        spphone: "",
        sp_real_name: "",
        spid: "",
        captcha: "",
        keyCode: "",
        codeUrl: "",
        codeVal: "",
		event:"register",
        protocol: false,
				checked: 0,
        inAnimation: false,
				disabled: false,
				isDisabled:false,
        isShowCode: false,
				isTijiao: false,
				
				countdown: 0,
				cTimer: null,
				event: '',
      };
    },
    // mixins: [sendVerifyCode, colors],
    mounted: function() {
      // this.getCode();
    },
    onLoad(options) {
      let that = this;
      that.spid = options.spid;
			console.log(options)
			that.spphone = options.sharecode
      console.log("推荐人：" + that.spphone);
    //   getUserSpid(options.spid).then(res => {
    //     that.spphone = res.data.phone;
    //     that.sp_real_name = res.data.real_name
    //   }).catch(err => {
    //     that.spphone = '';
    //   })
    },
    methods: {
			CheckboxChange(e) {
				this.checked = e.detail.value;
			},
      ChangeIsDefault(e) {
				// console.log(e)
        this.$set(this, 'protocol', !this.protocol);
				this.protocol = !this.protocol
      },
      privacy(type) {
        uni.navigateTo({
          url: "/pages/users/privacy/index?type=" + type
        })
      },
      back() {
        //uni.navigateBack();
        uni.navigateTo({
          url: "/pages/user/auth/name"
        })
      },
      app() {
        window.location.href = `https://yikeshun.wxdaili.com/down/index.html`;
        //uni.navigateTo({
        //	url: `${HTTP_REQUEST_URL}/xyd.apk`
        //})
      },
      again() {
        this.codeUrl =
          VUE_APP_API_URL + "/captcha?" + this.keyCode + Date.parse(new Date());
      },
      getCode() {
      //   getCodeApi()
      //     .then(res => {
      //       this.keyCode = res.data.key;
      //     })
      //     .catch(res => {
      //       this.$util.Tips({
      //         title: res.msg.msg || this.$t(`加载失败`)
      //       })
      //     });
      },
      async register() {
        let that = this;
				
				console.log(that.checked)
        if (!that.checked == 2) {
					this.checked = 1;
					setTimeout(() => {
						this.checked = 0;
						this.$wanlshop.msg('请先同意用户协议和隐私保护声明');
						this.checked = ['2'];
					}, 300)
					return false
				}
        if (!that.account) {
						this.$wanlshop.msg('请填写手机号码');
						return false
				}
        //if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
        // title: that.$t(`请输入正确的邮箱码`)
        //});
        //if (!that.real_name) return that.$util.Tips({
        //  title: that.$t(`请填写真实姓名`)
        //});
        //if (!that.captcha) return that.$util.Tips({
        //  title: that.$t(`请填写验证码`)
        //});
        //if (!/^[\w\d]+$/i.test(that.captcha)) return that.$util.Tips({
        //  title: that.$t(`请输入正确的验证码`)
        //});
        if (!that.password) {
					this.$wanlshop.msg('请填写密码');
					return false
				}
        if (!that.spphone) {
						this.$wanlshop.msg('推荐人邀请码不能为空');
						return false
				}
        //if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.spphone)) return that.$util.Tips({
          //title: that.$t(`请输入正确的推荐人邮箱`)
        //});
        if (/^([0-9]|[a-z]|[A-Z]){0,6}$/i.test(that.password)) {
					this.$wanlshop.msg('您输入的密码过于简单');
					return false
				}
        if (that.password != that.passwordconf) {
					this.$wanlshop.msg('请填写密码');
					return false
				}
				if(that.isTijiao)
				{
					return false;
				}
				that.isTijiao=true;
				// await
				uni.request({
				    url: '/wanlshop/user/register', 
					method: 'POST',
					data:{
						mobile: that.account,
						captcha: that.captcha,
						password: that.password,
						nickname: that.real_name,
						sharecode: that.spphone
					},
				    success: res => {
						this.$wanlshop.msg('注册成功,请点击下方APP下载,或者跳转登陆');
				    },
					// 1.1.8升级
					complete: res =>{
						if(res.data.code == 0){
							that.isTijiao=false;
						}
					}
				});
      },
      async registerReset() {
        var that = this;
        if (!that.account) {
					this.$wanlshop.msg('请填写邮箱码');
					return false
				}
        if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) {
					this.$wanlshop.msg('请输入正确的邮箱码');
					return false
				}
        if (!that.captcha) {
					this.$wanlshop.msg('请填写验证码');
						return false
					
				}
        registerReset({
            account: that.account,
            captcha: that.captcha,
            password: that.password,
            code: that.codeVal
          })
          .then(res => {
						this.$wanlshop.msg(res.msg);
            
          })
          .catch(res => {
            that.$util.Tips({
              title: res
            })
          });
      },
			sendMessage() {
				
				// await
				uni.request({
				    url: '/wanlshop/sms/send', 
					method: 'POST',
					data:{
						event: this.event,  
						mobile: this.account
					},
				    success: res => {
						this.$wanlshop.msg('验证码发送成功');
						this.startTimer();
				    },
					// 1.1.8升级
					complete: res =>{
						if(res.data.code == 4){
							this.$refs.wanlCaptcha.init({event: this.event,mobile: this.mobile}).then(() => {
								// 验证通过回调
								this.$wanlshop.msg('验证码发送成功');
								this.startTimer();
							}).catch(() => {
								uni.navigateBack({ delta: 1 });
							});
						}
					}
				});
			},
			startTimer() {
				this.countdown = 60;
				
				if (this.cTimer == null) {
					this.cTimer = setInterval(() => {
						this.countdown--;
						if (this.countdown == 0) {
							this.clearTimer();
						}
					}, 1000)
				}
			},
			clearTimer() {
				clearInterval(this.cTimer);
				this.cTimer = null;
			},
			resend(){
				this.startTimer();
				this.code = [];
				this.currentFocus = 0;
				this.countdown = 60;
				this.sendMessage();
			},
      async code() {
        let that = this;
        if (!that.account) {
					this.$wanlshop.msg('请填写手机号');
						return false
				}
        if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) {
					this.$wanlshop.msg('请输入正确的手机号');
						return false
				}
        that.type = "register";
        await registerVerify({
            phone: that.account,
            type: that.type,
            key: that.keyCode,
            code: that.codeVal
          })
          .then(res => {
						this.$wanlshop.msg(res.msg || `加载失败`)
            
            that.sendCode();
          })
          .catch(res => {
						this.$wanlshop.msg(res);
            
          });
      },
    }
  };
</script>
<style scoped>
	@import url("auth.css");
	
	.auth-clause {
		display: flex;
		align-items: center;
		font-size: 25rpx;
		color: #909090;
	}
	
	
	.shake-horizontal{
		animation-name: shake-horizontal;
		animation-duration: 100ms;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in-out;
		animation-delay: 0s;
		animation-play-state: running;
	}
	
	.auth-clause checkbox {
		margin-right: 6rpx;
		transform: scale(0.7);
	}

	checkbox .uni-checkbox-input::before {
		display: block;
	}
  .code img {
    width: 100%;
    height: 100%;
  }

  .protocol {
    margin-top: 40rpx;
    color: #999999;
    font-size: 24rpx;
    text-align: left;
    bottom: 20rpx;
  }

  .trembling {
    animation: shake 0.6s;
  }
	
	.acea-row {
		display: -webkit-box;
		display: -moz-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-lines: multiple;
		-moz-box-lines: multiple;
		-o-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap
	}
	
	.acea-row.row-middle {
		-webkit-box-align: center;
		-moz-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center
	}
	
	.acea-row.row-top {
		-webkit-box-align: start;
		-moz-box-align: start;
		-o-box-align: start;
		-ms-flex-align: start;
		-webkit-align-items: flex-start;
		align-items: flex-start
	}
	
	.acea-row.row-bottom {
		-webkit-box-align: end;
		-moz-box-align: end;
		-o-box-align: end;
		-ms-flex-align: end;
		-webkit-align-items: flex-end;
		align-items: flex-end
	}
	
	.acea-row.row-center {
		-webkit-box-pack: center;
		-moz-box-pack: center;
		-o-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center
	}
	
	.acea-row.row-right {
		-webkit-box-pack: end;
		-moz-box-pack: end;
		-o-box-pack: end;
		-ms-flex-pack: end;
		-webkit-justify-content: flex-end;
		justify-content: flex-end
	}
	
	.acea-row.row-left {
		-webkit-box-pack: start;
		-moz-box-pack: start;
		-o-box-pack: start;
		-ms-flex-pack: start;
		-webkit-justify-content: flex-start;
		justify-content: flex-start
	}
	
	.acea-row.row-between {
		-webkit-box-pack: justify;
		-moz-box-pack: justify;
		-o-box-pack: justify;
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between
	}
	
	.acea-row.row-around {
		justify-content: space-around;
		-webkit-justify-content: space-around
	}
	
	.acea-row.row-column-around {
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		justify-content: space-around;
		-webkit-justify-content: space-around
	}
	
	.acea-row.row-column {
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		-o-box-orient: vertical;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column
	}
	
	.acea-row.row-column-between {
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		-o-box-orient: vertical;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: justify;
		-moz-box-pack: justify;
		-o-box-pack: justify;
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between
	}
	
	.acea-row.row-center-wrapper {
		-webkit-box-align: center;
		-moz-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-moz-box-pack: center;
		-o-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center
	}
	
	.acea-row.row-between-wrapper {
		-webkit-box-align: center;
		-moz-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: justify;
		-moz-box-pack: justify;
		-o-box-pack: justify;
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between
	}
	.register {
		/* background-color: #fe6600; */
		width: 100%;
		height: 120vh
	}
	
	.register .shading {
			background-image: url("");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			width: 100%;
			height: 286rpx;
			padding-top: 70rpx;
		}
	
	.register .shading .pictrue {
		width: 172rpx;
		height: 172rpx;
		border-radius: 50%;
		background-color: rgba(255,255,255,.8);
		margin: 0 auto
	}
	
	.register .shading .pictrue image {
		width: 164rpx;
		height: 164rpx;
		border-radius: 50%;
		display: block
	}
	
	.register .whiteBg {
		width: 620rpx;
		border-radius: 16rpx;
		background-color: #fff;
		margin: 30rpx auto 0 auto;
		padding: 45rpx 30rpx 0 30rpx
	}
	
	.register .whiteBg .title {
		font-size: 36rpx;
		color: #282828;
		text-align: center;
		font-weight: 700
	}
	
	.register .whiteBg .title .item~.item {
		margin-left: 85rpx
	}
	
	.register .whiteBg .title .item {
		color: #999;
		border-bottom: 5rpx solid #fff;
		padding-bottom: 10rpx
	}
	
	.register .whiteBg .title .item.on {
		color: #282828;
		border-bottom-color: #f35749
	}
	
	.register .whiteBg .list .item {
		
		border-bottom: 1rpx solid #ededed;
		padding: 47rpx 0 13rpx 0;
		position: relative;
		width:100%;
		box-sizing: border-box;
	}
	
	.register .whiteBg .list .item .name {
		font-size: 26rpx;
		color: #2d3342;
		margin-bottom: 27rpx;
		text-align: left
	}
	
	.register .whiteBg .list .item image {
		width: 27rpx;
		height: 33rpx;
		display: block
	}
	
	.register .whiteBg .list .item input {
		font-size: 32rpx;
		flex: 1;
		margin-left: 20rpx
	}
	
	.register .whiteBg .list .item .placeholder {
		color: #ccc
	}
	
	.register .whiteBg .list .item .codeIput {
		width: 250rpx;
		margin-left: 20rpx
	}
	
	.register .whiteBg .list .item .code {
		position: absolute;
		width: 150rpx;
		height: 50rpx;
		background-color: #e69f45;
		border-radius: 30rpx;
		color: #fff;
		line-height: 50rpx;
		text-align: center;
		bottom: 17rpx;
		right: 0;
		font-size: 25rpx
	}
	.auth .code {
		color: #EF430F;
	}
	.auth .code.on {
		color: #ccc;
	}
	.register .whiteBg .list .item .code.on {
		background-color: #bbb
	}
	
	.register .whiteBg .list .forgetPwd {
		text-align: right;
		font-size: 28rpx;
		color: #666;
		margin-top: 20rpx
	}
	
	.register .whiteBg .list .forgetPwd .iconfont {
		font-size: 30rpx;
		margin-right: 10rpx;
		vertical-align: middle
	}
	
	.register .whiteBg .logon {
		font-size: 34rpx;
		color: #fff;
		font-weight: 700;
		height: 86rpx;
		border-radius: 43rpx;
		background: #fe6600;
		text-align: center;
		line-height: 86rpx;
		margin-top: 47rpx
	}
	
	.register .whiteBg .tip {
		height: 110rpx;
		text-align: center;
		line-height: 105rpx;
		font-size: 30rpx;
		color: #ccc
	}
	
	.register .bottom {
			background-image: url("");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			width: 620rpx;
			height: 36rpx;
			margin: 0 auto;
		}
</style>
